<template>
    <div class="today">
        <div class="today_top">
            <span class="back el-icon-arrow-left" @click="back"></span>
            今日槽点
            <span class="more el-icon-more"></span>
        </div>
        <div class="today_content">
            <div class="user">
                <img src="../../assets/images/11.gif" alt="">
                <span>逗小趣</span>
            </div>
            <div class="to_people">
                <div class="people">
                    <span>@逗小趣</span>
                </div>
                <div class="content">
                    <p>
                        <span>希特勒希特勒希特勒希特勒希特勒希特勒希特勒希特勒希特勒希特勒希特勒希特勒</span><br>
                        <span>#逗趣槽点#</span>
                    </p>
                    <img src="../../assets/images/15.gif" alt="">
                </div>
            </div>
        </div>
        <div class="today_dis">
            <div class="dis_title"><span class="line"></span>评论<span class="num">541224</span></div>
            <ul class="dis_list">
                <li>
                    <h2>鸟姐威武~ <span>20分钟前</span></h2>
                    <div class="dis_con">
                        <img src="../../assets/images/11.gif" alt="">
                            <span class="user">开心的小松鼠~</span><br>
                    </div>
                </li>
                <li>
                    <h2>鸟姐威武~ <span>20分钟前</span></h2>
                    <div class="dis_con">
                        <img src="../../assets/images/11.gif" alt="">
                            <span class="user">开心的小松鼠~</span><br>
                    </div>
                </li>
                <li>
                    <h2>鸟姐威武~ <span>20分钟前</span></h2>
                    <div class="dis_con">
                        <img src="../../assets/images/11.gif" alt="">
                            <span class="user">开心的小松鼠~</span><br>
                    </div>
                </li>
            </ul>
        </div>
        <div class="publish">
            <input type="text" placeholder="发表评论">
        </div>
    </div>
</template>
<script>
    export default{
        name:'today',
        data(){
            return{

            }
        },
        methods:{
            back(){
                this.$router.go(-1);
            }
        }
    }
</script>
<style lang="less" scoped>
    @rem:35rem;
    .today_top{
        height:30/@rem;
        margin-top:5/@rem;
        text-align:center;
        padding:0 5/@rem;
        font-size:16/@rem;
        font-weight:bold;
        line-height:30/@rem;
        border-bottom:1/@rem solid #ccc;
        .back{
            float:left;
            line-height:30/@rem;
        }
        .more{
            float:right;
            line-height:30/@rem;
        }
    }
    .today_content{
        padding:5/@rem;
        .user{
            img{
                width:30/@rem;
                height:30/@rem;
                border-radius:50%;
            }
            span{
                vertical-align:top;
                line-height:35/@rem;
            }
        }
        .to_people{
            margin-top:10/@rem;
            overflow:hidden;
            line-height:20/@rem;
            .people{
                float:left;
                
            }
            .content{
                width:260/@rem;
                float:left;
                margin-left:25/@rem;
                p{
                    
                    span:nth-of-type(1){
                        overflow:hidden;
                        white-space:nowrap;
                        text-overflow:ellipsis;
                    }
                    span:nth-of-type(2){
                        color:#ccc;
                    }
                }
                img{
                    width:150/@rem;
                    height:150/@rem;
                }
            }
        }
    }
    .today_dis{
        padding:10/@rem 0;
        border-bottom:3/@rem solid #f0f0f0;
        .dis_title{
            padding:0 5/@rem;
            height:30/@rem;
            line-height:30/@rem;
            background:#f0f0f0;
            position:relative;
            padding-left:10/@rem;
            .line{
                position:absolute;
                left:5/@rem;
                top:5/@rem;
                width:3/@rem;
                height:20/@rem;
                background:#2780fe;
                
            }
        }
        .dis_list{
            padding:0 5/@rem;
            margin-top:10/@rem;
            li{
                margin-bottom:10/@rem;
                border-bottom:4/@rem solid #f0f0f0;
            }
            .dis_con{
                margin-top:10/@rem;
                height:30/@rem;
                
                img{
                    width:28/@rem;
                    height:28/@rem;
                    border-radius:50%;
                }
                .user{
                    vertical-align:top;
                    line-height:28/@rem;
                }
            }
        }
    }
    .publish{
        input{
            outline:none;
            display:block;
            width:90%;
            text-indent:10/@rem;
            font-size:16/@rem;
            margin:10/@rem auto;
            border:1/@rem solid #ccc;
            border-radius:5/@rem;
            height:30/@rem;
        }
    }
</style>